<template>
<div>
    <div class="summernoteBox" v-if="true">
    </div>
</div>
</template>


<script>

export default {
    props:{
        summerNoteVal: {
            type: String,
            default: ''
        }
    },
    watch:{
        summerNoteVal:function(val){
            $('.summernoteBox').summernote('code', val);
        }
    },
    mounted() {

        let self = this;
        self.summernoteInit().then(()=>{
            // summernote发生改变
            $('.summernoteBox').on('summernote.change', function(we, contents, $editable) {
                self.summerNoteChange();
            });
            //初始赋值
            $('.summernoteBox').summernote('code', self.summerNoteVal);
        })
    },
    created(){

        //初始化远程调用 -- 为后续修改增加js依赖，降级index.html访问速度问题
        // const s1 = document.createElement('script');
        // s1.type = 'text/javascript';
        // s1.src = 'https://code.jquery.com/jquery-3.4.1.min.js';
        // document.body.appendChild(s1);

        const s2 = document.createElement('script');
        s2.type = 'text/javascript';
        s2.src = 'http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js';
        document.body.appendChild(s2);

        const s3 = document.createElement('script');
        s3.type = 'text/javascript';
        s3.src = 'http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js';
        document.body.appendChild(s3);
    },
    methods: {
        summernoteInit(){//编辑器初始化
            // $('.summernoteBox').summernote({
            //     height: 200,
            //     tabsize: 2,
            //     lang: 'zh-CN'
            // });

            // let self=this;
            return new Promise(resolve=>{
                
                //初始化摘要内容富文本编辑器
                // $('.summernoteBox').summernote({
                //     lang: 'zh-CN',//语言
                //     placeholder: '请输入内容',//提示语
                //     height: 200,//高度
                //     width: 'auto',//宽度  也可以指定宽度
                //     htmlMode: true,
                //     fontNames: [//字体类型配置
                //         '宋体','微软雅黑','楷体','黑体','隶书'
                //     ],
                //     callbacks: {//回调函数
                //         onSubmit: function() {
                //             // vm.richContent = $('#summernote').summernote('code')
                //         },
                //         onKeyup:function(){
                //             //
                //         }
                //     }
                // });

                $('.summernoteBox').summernote({
                    height: 200,
                    tabsize: 2,
                    lang: 'zh-CN'
                });

                resolve();
            });

        },
        summerNoteChange(){//富文本编辑器发生改变
            this.$emit('input',$('.summernoteBox').summernote('code'));
        }
    },
}
</script>

<style  scoped>

  /* 0.8.12版本，静态文件引入不可用  */
  /*@import "http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css";*/
  /*@import "https://cdn.jsdelivr.net/npm/summernote@0.8.12/dist/summernote-lite.min.css";*/
  /*@import "//cdn.jsdelivr.net/npm/summernote@0.8.12/dist/summernote-lite.min.css";*/
  @import "//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css";
  @import "//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css";


</style>